<template>
	<view style="width: 100%; display: flex;flex-direction: column;justify-content: center;align-items: center;">
		<!-- 滑动控件 -->
		<scroll-view :enable-flex="true" :show-scrollbar="false" @scrolltolower="lower" :scroll-y="true"
			style="margin-top: 30rpx; display: flex;flex-direction: column; align-items: center;height: 100vh;">

			<!-- 卡券item -->
			<view class="bgc" :style="item.status_name === '未使用' ? cardAvailable : cardNoAvailable"
				v-for="(item,index) in cardlist" :key="index">
				<text style="width: 654rpx; font-size: 20rpx;margin-top: 24rpx;">{{item.gettimestart}}</text>
				<!-- <text @click="btn(item,index)">勾选</text> -->
				<!-- <text @click="btn(item,index)" :class="['btn',index === ind ? 'btnok' : '']">确定</text> -->

				<text style="width: 654rpx; font-size: 36rpx;margin-top: 4rpx;text-align: end;">{{item.name}}</text>
				<view style="width: 654rpx; margin-top: 10rpx;display: flex;justify-content: flex-end;">
					<text
						style="font-size: 50rpx;margin-right: 41rpx;align-self: flex-end;line-height: 50rpx;">￥{{item.amount}}</text>
					<text style="font-size: 30rpx;align-self: flex-end;line-height: 30rpx;">{{item.limit}}</text>
				</view>
				<image v-if="item.status_name === '已使用' " mode="aspectFill" src="../static/guoqi.png"
					style="position: absolute;width: 146rpx;height: 146rpx;right: 48rpx;"></image>
			</view>

		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cardlist: [],
				ind: '',
				cardList: [
					// {
					// 	time:'2021.01.16 - 2021.02.16',
					// 	price:'20',
					// 	type:'抵扣券',
					// 	limit:'仅限洗车使用',
					// 	statu:true
					// },
					// {
					// 	time:'2021.01.16 - 2021.02.16',
					// 	price:'20',
					// 	type:'抵扣券',
					// 	limit:'仅限洗车使用',
					// 	statu:true
					// },
					// {
					// 	time:'2021.01.16 - 2021.02.16',
					// 	price:'20',
					// 	type:'抵扣券',
					// 	limit:'仅限洗车使用',
					// 	statu:true
					// },
					// {
					// 	time:'2021.01.16 - 2021.02.16',
					// 	price:'20',
					// 	type:'抵扣券',
					// 	limit:'仅限洗车使用',
					// 	statu:true
					// },
					// {
					// 	time:'2021.01.16 - 2021.02.16',
					// 	price:'20',
					// 	type:'抵扣券',
					// 	limit:'仅限洗车使用',
					// 	statu:true
					// },
					// {
					// 	time:'2021.01.16 - 2021.02.16',
					// 	price:'20',
					// 	type:'抵扣券',
					// 	limit:'仅限洗车使用',
					// 	statu:true
					// },
					// {
					// 	time:'2021.01.16 - 2021.02.16',
					// 	price:'20',
					// 	type:'抵扣券',
					// 	limit:'仅限洗车使用',
					// 	statu:true
					// },
					// {
					// 	time:'2021.01.16 - 2021.02.16',
					// 	price:'20',
					// 	type:'抵扣券',
					// 	limit:'仅限洗车使用',
					// 	statu:true
					// },
					// {
					// 	time:'2021.01.16 - 2021.02.16',
					// 	price:'20',
					// 	type:'抵扣券',
					// 	limit:'仅限洗车使用',
					// 	statu:true
					// },
					// {
					// 	time:'2021.01.16 - 2021.02.16',
					// 	price:'20',
					// 	type:'抵扣券',
					// 	limit:'仅限洗车使用',
					// 	statu:true
					// },
					// {
					// 	time:'2021.01.16 - 2021.02.16',
					// 	price:'20',
					// 	type:'抵扣券',
					// 	limit:'仅限洗车使用',
					// 	statu:true
					// },
					// {
					// 	time:'2021.01.16 - 2021.02.16',
					// 	price:'20',
					// 	type:'抵扣券',
					// 	limit:'仅限洗车使用',
					// 	statu:false
					// }
				],
				// cardAvailable:"",
				// cardNoAvailable:"background: url(../static/backGuoqi.png);width: 702rpx;height: 170rpx;margin-top: 30rpx; background-size: cover;display: flex;flex-direction: column;align-items: center;color: #B3B3B3;"

			}
		},
		onLoad() {},
		onShow() {
			this.getCardList();
		},
		methods: {
			// btn(item,index) {
			// 	this.$Router.push({
			// 		name:'orderDetails',
			// 		params:{
			// 			cardid:item.user_coupons_id,
			// 		}
			// 	})
			// 	console.log("item,index: ",item,index);
			// 	this.ind = index;
			// },
			lower() {
				console.log("页面滚动到底部了")
			},
			// 获取卡券数据
			async getCardList() {
				let res;
				try {
					res = await this.$request.post('addons/shopro/coupons/lists');
				} catch (e) {
					//TODO handle the exception
					console.log('e===', e);
					return uni.showToast({
						title: '网络连接失败！',
						icon: 'none'
					});
				}
				this.cardlist = res.data.data
				console.log('获取卡券数据===', this.cardlist);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bgc {
		background: url('https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/3bef949078e91532b04a4cc7c28b585.png');
		width: 702rpx;
		height: 170rpx;
		margin-top: 30rpx;
		background-size: cover;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #FFFFFF;
	}

	.btn {
		justify-content: center;
		align-items: center;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		position: absolute;
		left: 4%;
		width: 381rpx;
		height: 170rpx;
		font-size: 24rpx;
		color: #fff;
	}

	.btnok {
		color: #ff0000;
		font-size: 32rpx;
	}
</style>
